<style>
.item-entry{
    float: left;
    width: 165px;
    z-index: 10;
}

/*
Author : Onextrapixel
URL: http://www.onextrapixel.com
*/

* {
	border:none; 
	margin:0; 
	padding:0;
        
}

body {
	background:#fff; 
	color: #999999; 
	font:12.35px Georgia, Arial, "Lucida Grande", Verdana, sans-serif;
}

a:link {
	color:#0054a6;
	text-decoration:none; 
}

h1 {
	font-size:20px;
	margin-bottom:20px; 
}

p{
    color:#2b5873;
}
#wrap {
	margin:10px auto;
	width:1150px; 
}
/************************************************
	      TOP CONTAINER		
************************************************/
#top-container{
    width: 1150px;
    height: 110px; 
    margin-top: 30px; ;
}
.left-top-container{
    
    width: 192px;
    float: left;
}

.center-top-container{
    width: 760px;
    float: left;
}

.right-top-container{
    width: 192px;
    float: right;
}

.number{
    float: left;
    width: 250px;
}
.number p{
    float: left;
    width: 162px;
    margin-top: 10px;
}
.number img{
    float: left;
    margin:0px 10px 0px 18px;
    
}
.connect-facebook{
    background: url(<?php echo base_url(); ?>images/facebook.png) no-repeat  right center;
    width:177px;
    height: 113px;
    float: right;
    text-indent: 1000000999px;
}
/************************************************
	      CENTER CONTAINER		
************************************************/
#center-container{
    width: 1150px;
    height: auto;
    
}
.left-items{
    float: left;
    
}
.left-center-container{
    width: 192px;
    float: left;
   
}

.center-center-container{
    /*width: 760px; */
   /* float: left; */
}

.center-center-container h2{
    background: url(<?php echo base_url(); ?>images/bg-title.png) no-repeat top left;
    width: 200px; 
    height: 35px;
    padding: 10px 0px 0px 45px;
    margin-left: 0px;
    font-size: 15px;
}


.right-center-container{
    width: 192px;
    float: right;
}
.add-right{
    float: right;
}
.recyclebin{
    float: left;
    width: 110px;
    height: 120px;
    position: relative;
    background: url(<?php echo base_url(); ?>images/bg-add.png);
}

.recyclebin h3{
    
    text-align: center;
    margin-top:5px;
    color: #2b5873;
}
.drop-remove-container , .drop-remove-container_first , .drop-remove-container_second , .drop-remove-container_third
, .drop-remove-container_forth , .drop-remove-container_fifth{
    border: 2px  solid red;
    margin-left: 5px;
    float: left;
    width: 110px;
    height: 120px;
    position: relative;
    background: url(<?php echo base_url(); ?>images/bg-add.png);
    z-index:  9;
        
}
.drop-remove-container h3 , .drop-remove-container_first h3, .drop-remove-container_second h3, .drop-remove-container_third h3
, .drop-remove-container_forth h3, .drop-remove-container_fifth h3{
    z-index: 8;
    text-align: center;
    margin-top:5px;
    color: #2b5873;
}
.drop-remove{
    left: 20px;
    top: 0px;
    width: 70px;
    height: 80px;
    position: relative;
    background: url(<?php echo base_url(); ?>images/recyclebin1.png);
}
.drop-remove h3{
    
    text-align: center;
    margin-top:5px;
    color: #2b5873;
}
.recyclebin .add-someone{
	position: absolute;
	top: 25px;
	left: 15px;
	background: url(<?php echo base_url(); ?>images/add.png);
	width: 80px;
	cursor:pointer;
	height: 90px;
}
/************************************************
	      BOTTOM CONTAINER		
************************************************/
#bottom-container{
    clear: both;
    width: 1150px;
    height: 150px;
    
}
.top-bottom-container{
    width: 1150px;
    height: 100px;
   
}

.bottom-bottom-container{
    width: 1150px;
    height: 20px;
    margin: 30px auto;
}
.bottom-bottom-container p{
    text-align: center;
    text-decoration: underline;
    color: #2B5873;
    font-size: 16px;
}
.lef-bottom-container{
    width: 250px;
    height: 50px;
    float: left;
    /*margin-left:55px; */
}

.lef-bottom-container h2{
    width: 187px;
    float: left;
}
.lef-bottom-container p{
    width: 187px;
    float: left;
    padding-top: 10px;
    
}
.right-bottom-container{
    width: 830px;
    height: 50px;
    float: right;
}
.btnPreview{
    float: right;
    background: url(<?php echo base_url(); ?>images/button_preview.png) no-repeat top right;
    width: 184px;
    height: 60px;
    text-indent: 100000px;
    margin-left: 10px;
    cursor: pointer;
}
.btnCreate{
    background: url(<?php echo base_url(); ?>images/button_create.png) no-repeat top right;
    width: 187px;
    height: 60px;
    text-indent: 100000px;
     float: right;
     margin-left: 10px;
     cursor: pointer;
}
.btnPrint{
    background: url(<?php echo base_url(); ?>images/button_print.png) no-repeat top right;
    width: 187px;
    height: 60px;
    text-indent: 100000px;
     float: right;
     margin-left: 10px;
     cursor: pointer;
}
.btnShare{
    background: url(<?php echo base_url(); ?>images/button_share.png) no-repeat top right;
    width: 187px;
    height: 60px;
    text-indent: 100000px;
     float: right;
     cursor: pointer;
     margin-left: 10px;
}
/************************************************
	      JCAROUSEL LITE		
************************************************/
 
.slider {
	float:left;
	left: 0px;
	margin:0px;
	height: 180px;
	padding: 0px;
	position:relative;
    font-size:10px;
	width: 670px;
	background: url(<?php echo base_url(); ?>images/ex_bg.png) no-repeat top left;
	
}
	
.item-entry {
	height:125px;
	width:121px; 
        padding: 1px 2px 0px 2px;
}

 .profile-icon{
	/*cursor:move;  */
	padding-top:3px ;
    
    width: 121px;
    height: 125px;
    background: url(<?php echo base_url(); ?>images/bg_profile_small.png) no-repeat top left; 
}
.profile-icon .profile-content{
    width: 121px;
    height: 125px;
    
}
.profile-star table{
    width: 120px;
    margin: 2px 0px 0px 2px;
}


 .profile-star img{
    width: 15px;
    height: 15px;
    padding: 0px;
    float:left;
    margin-left:4px;
    
}


</style>
<?php
    
    $url=base_url();
    $category_first = <<<EOF
        <div  id="category_first">
                     
                    <div id="list-one" style="float: left; ">
                                 		
                                            <div class="slider">
            <!--  start  ul. -->
                            <div>                                              
EOF;
?>
<!--Begin List one -->
   
    
 <?php
 $count=0;
 foreach ($category_3 as $categoryItem){  
    $count++;
    $it=explode("|",$categoryItem);
    $avata=$it[0];
    $name=$it[1];
    $company=$it[2];
    $category_first_Item = <<<EOF
                            <div class="item-entry" >
                                    <div class="profile-icon">
                                        <div class="profile-content">
                                        <table width="120px" height="120px" >
                                             <tr>
                                             <td> 
                                                <img alt="next" src="{$url}img/avata/default.png" class=" " width="50px" height="50px"> 
                                             </td>
                                             <td height="50px">
                                            <p>{$name}</p>
                                            <p>{$company}</p>
                                            </td>
                                            </tr> 
                                            <tr height="50px">
                                              <td colspan="2"><p >Url: <a href="#"><a href="#">www.axure.com</a></p></td>
                                            </tr>
                                            <tr height="20px">
                                              <td colspan="2"><div class="profile-star"><img alt="next" src="{$url}images/stars.png" width="15px" height="15px" class=" ">
                                                                   <img alt="next" src="{$url}images/stars.png"  width="15px" height="15px" class=" ">
                                                                   <img alt="next" src="{$url}images/stars.png"  width="15px" height="15px"  class=" ">
                                                                   <img alt="next" src="{$url}images/stars.png"  width="15px" height="15px" class=" ">
                                                                   <img alt="next" src="{$url}images/stars_black.png"   width="15px" height="15px" class=" ">
                                              </div></td>
                                            </tr> 
                                            
                                        </table>
                                        </div> 
                                    </div>

                                    </div>                                       
EOF;
    //  var_dump($category_first_Item);                                        
    $category_first = $category_first.$category_first_Item;
}

 ?>
                      
 
<?php 


$category_first_bottom=<<<EOF
     </div>
                                 
                        </div>

                <div style="clear: both;"></div>
            </div>
        <!-- End List one-->
EOF;

$category_first = $category_first.$category_first_bottom;
echo $category_first;
?>